<template>
  <div class='skuCom'>
    <el-row style="margin:10px 0">
      <el-col :span="1.5">
        <el-button type="primary"
                   icon="el-icon-download"
                   size="small"
                   @click="handleExport"
                   v-loading="loading">导出明细</el-button>
      </el-col>
    </el-row>
    <el-row v-loading="loading">
      <el-table :data="tableData"
                border
                max-height="500"
                show-summary
                :summary-method="getSummaries">
        <el-table-column prop="tag_campaign"
                         label="SKU"
                         width="">
        </el-table-column>
        <el-table-column prop="name"
                         label="运营"
                         width="">
        </el-table-column>
        <el-table-column prop="quantity"
                         label="件数"
                         width="">
        </el-table-column>
        <el-table-column prop="total_price"
                         label="销售额"
                         sortable>
        </el-table-column>
        <el-table-column prop="total_price_percentage"
                         label="百分比"
                         sortable>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>


import { skulist } from '@/api/system/orders'
export default {
  name: 'skuCom',
  components: {},
  props: {
    queryParams: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      tableData: [],
      sumData: {},
      loading: false
    }
  },
  computed: {},
  watch: {},
  methods: {
    getData () {
      this.loading = true
      skulist(this.formatQueryParams(this.queryParams)).then(res => {
        if (res.data && res.data.length) {
          this.tableData = res.data
          this.sumData = res.lists_news_total
        }
      }).finally(() => {
        this.loading = false
      })
    },
    handleExport () {
      const qyparams = {
        ...this.formatQueryParams(this.queryParams)
      }

      this.$confirm('是否确认导出?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.loading = true
          return this.request.get('/admin/customerjourney/export_achievement_sku', { params: qyparams, responseType: 'blob' })
        })
        .then(response => {
          this.download(response,'SKU明细.xlsx')
        }).finally(() => {
          this.loading = false
        })
    },
    getSummaries (param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        const key = column.property
        switch (key) {
          case 'tag_campaign':
            sums[index] = this.sumData.freight
            break
          case 'name':
            sums[index] = this.sumData.material
            break
          case 'quantity':
            sums[index] = this.sumData.GrossProfit
            break
          case 'total_price':
            sums[index] = this.sumData.total_price
            break
          default:
            sums[index] = ''
        }
      })
      return sums
    }
  }
}
</script>
<style scoped lang='scss'>
</style>